<template>
	<view class="boom">
		<view class=" notice">
			<view class="trumpet">
				<view class="icon">
					<image class="trumpt-icon" :src="imageUrl('boom-trumb.png')" mode="aspectFit" />
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<!-- 公告 -->
				<view class="fl">
					<u-notice-bar :text="noticeText" icon=" " color="#fff" bgColor="#1c1c1c" speed="100rpx"
						fontSize="28rpx">
					</u-notice-bar>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view id="scroll_div" class="fl">
					<view id="scroll_begin">
						<text v-for="(item,index) in trumpetcontent" :key="index" class="addspace">恭喜 <span
								class="noticeusers">{{item.name}}</span> 获得
							<span class="usersreward">{{item.reward}}</span></text>
					</view>
					<view id="scroll_end"></view>
				</view>
				<!-- #endif -->
			</view>
			<view class="rules">
				<image class="team" src="../../static/images/boom/teamRule-icon.png" mode=""></image>
				<view class="icon-word">
					规则
				</view>
			</view>
			<view class="myteam">
				<image class="team" src="../../static/images/boom/myteam-icon.png" mode=""></image>
				<view class="icon-word">
					我的团
				</view>
			</view>
		</view>
		<!-- 广告图 -->
		<view class="ad">
			<image :src="imagesUrl('gift-banner.png')" mode="aspectFit" />
		</view>
		<!-- 吸顶 -->
		<!--  #ifdef  H5 -->
		<u-sticky bg-color="#0a0a0a" z-index="10" offset-top="40rpx">
			<!--  #endif -->
			<!--  #ifdef  MP-WEIXIN -->
			<u-sticky bg-color="#0a0a0a" z-index="10">
				<!--  #endif -->
				<view class="kinds">
					<u-tabs :list="kinds" :activeStyle="{
			        color: '#fff',
			        fontWeight: '600',
			    }" :inactiveStyle="{
			        color: '#606266',
			    }" lineColor='#FF7803' lineWidth='32rpx' lineHeight='8rpx'>
						></u-tabs>
					<!-- 排序筛选 -->
					<view class="sort-box">
						<view :class="{'sort-box-item':true,'active':clickAll}" @click="chooseAllSort">综合</view>
						<view
							:class="{'sort-box-item':true,'two-arrow':true,'active':clickCell,'before':cellSort,'after':!cellSort}"
							@click="chooseCellSort">售价</view>
						<view
							:class="{'sort-box-item':true,'two-arrow':true,'active':clickTime,'before':timeSort,'after':!timeSort}"
							@click="chooseTimeSort">时间</view>
						<view
							:class="{'sort-box-item':true,'sinple-arrow':true,'active':clickMan,'before':ManSort,'after':!ManSort}"
							@click="chooseManSort">人数</view>
					</view>
					<view class="chooseman" v-if="show">
						<view v-for="(item,index) in mannum" :key="index" @click="chooseManNum(index)"
							:class="{'mannum':true,'choosed':choosedIdx==index}">
							{{item}}
							<view class="yes" v-if="choosedIdx==index">
								<image class="team" src="../../static/images/boom/checkteam-icon.png" mode=""></image>
							</view>
						</view>

					</view>
				</view>
			</u-sticky>
			<view class="goodscard">
				<view class="goods-cards" style="height: 100%;">

					<!-- 商品卡片 -->
					<view class="card-item" v-for="(item,index) in activityBoxList" :key="index"
						@click="goToPage('/pages/boom/BoomDetail')">
						<!-- 卡片左侧 -->
						<view class="card-lef">
							<image class="card-img" :src="item.image" mode=""></image>
						</view>
						<!-- 卡片右侧 -->
						<view class="card-rig">
							<view class="good-name">
								{{item.boxName}}
							</view>
							<!-- 盲盒概率 -->
							<view class="good-details">
								<view class="good-chance">获得概率:{{item.chance}}%</view>
								<view class="couponprice">￥{{item.price}}/张</view>
							</view>
							<view class="good-detailssec">
								<view class="goodstatus">
									未上车
								</view>
							</view>
						</view>
						<view class="join">
							<view class="joinnum">
								已参与2人，还差<span class="joinnums"> {{joinnum}}</span>人爆团成功
							</view>
							<button class="joinbtn">立即上车</button>
						</view>
						<view class="underline">
							<hr>
						</view>
					</view>
				</view>
			</view>
			<!-- 开团按钮 -->
			<view class="teambtn">
				<image :src="imageUrl('todrive.png')" mode="aspectFit" />
			</view>
			<!-- 返回底部按钮 -->
			<view>
				<u-back-top :scroll-top="scrollTop" icon="arrow-up-fill">
				</u-back-top>

			</view>

	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				// 选中的人团下标
				choosedIdx: 0,
				imagesUrl: app.imagesUrl,
				// 公告消息
				noticeText: '恭喜小太阳获得终极大奖（一等奖）',
				scrollTop: 0,
				show: false,
				mannum: ['5人团', '10人团', '20人团'],
				joinnum: 3,
				activityBoxList: [{
					image: app.imagesUrl('pinkdoll.png'),
					boxName: "盲盒名称盲盒名称盲盒名称盲盒名称盲盒名称盲盒名称",
					chance: 20,
					price: 100,
					boxStatus: 1
				}, {
					image: app.imagesUrl('bluecar.png'),
					boxName: "盲盒名称盲盒名称盲盒名称盲盒名称盲盒名称盲盒名称",
					chance: 20,
					price: 100,
					boxStatus: 1
				}, {
					image: app.imagesUrl('pinkdoll.png'),
					boxName: "盲盒名称盲盒名称盲盒名称盲盒名称盲盒名称盲盒名称",
					chance: 20,
					price: 100,
					boxStatus: 1
				}, {
					image: app.imagesUrl('bluecar.png'),
					boxName: "盲盒名称盲盒名称盲盒名称盲盒名称盲盒名称盲盒名称",
					chance: 20,
					price: 100,
					boxStatus: 1
				}, {
					image: app.imagesUrl('pinkdoll.png'),
					boxName: "盲盒名称盲盒名称盲盒名称盲盒名称盲盒名称盲盒名称",
					chance: 20,
					price: 100,
					boxStatus: 1
				}],
				trumpetcontent: [{
					name: '小太阳',
					reward: '终极大奖（一等奖）'
				}, {
					name: '小月亮',
					reward: '终极小奖（三等奖）'
				}, {
					name: '小月亮',
					reward: '终极小奖（三等奖）'
				}, {
					name: '小月亮',
					reward: '终极小奖（三等奖）'
				}],
				kinds: [{
					name: '全部',
				}, {
					name: '潮玩盲盒',
				}, {
					name: '动漫手办'
				}, {
					name: '3C数码'
				}, {
					name: '美妆'
				}],
				// 选中综合
				clickAll: true,
				// 选中售价
				clickCell: false,
				// 选中时间
				clickTime: false,
				// 点击人数
				clickMan: false,
				// 初次 售价升序
				cellSort: false,
				// 初次 时间升序
				timeSort: false,
				// 爆团人数
				ManSort: false,

			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 路由跳转
			goToPage(url) {
				this.show = false
				uni.navigateTo({
					url
				})
			},
			// 选中综合
			chooseAllSort() {
				this.reChoose()
				this.clickAll = true
				this.show = false
			},
			// 选中售价
			chooseCellSort() {
				this.reChoose()
				this.clickCell = true
				this.cellSort = !this.cellSort
				this.show = false
			},
			// 选中时间
			chooseTimeSort() {
				this.reChoose()
				this.clickTime = true
				this.timeSort = !this.timeSort
				this.show = false
			},
			// 选中人数
			chooseManSort() {
				this.reChoose()
				this.clickMan = true
				this.ManSort = !this.ManSort
				this.show = !this.show
			},
			// 重置选中状态
			reChoose() {
				this.clickMan = false
				this.clickAll = false
				this.clickCell = false
				this.clickTime = false
				this.ManSort = true
			},
			// 是否展示下拉框
			chooseManNum(idx) {
				this.choosedIdx = idx
				this.show = false
			},

			// #ifdef H5
			// H5通知滚动
			ScrollImgLeft() {
				var speed = 20;
				var MyMar = null;
				var scroll_begin = document.getElementById("scroll_begin");
				var scroll_end = document.getElementById("scroll_end");
				var scroll_div = document.getElementById("scroll_div");
				scroll_end.innerHTML = scroll_begin.innerHTML;

				function Marquee() {
					if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
						scroll_div.scrollLeft -= scroll_begin.offsetWidth;
					else
						scroll_div.scrollLeft++;
				}
				MyMar = setInterval(Marquee, speed);
			},
			// #endif 
		},
		mounted() {
			// #ifdef H5
			this.ScrollImgLeft()
			// #endif

		}
	}
</script>

<style lang="scss" scoped>
	.boom {
		width: 100%;
		height: 100%;
		background-color: #0A0A0A;

		.notice {
			width: 690rpx;
			height: 80rpx;
			color: white;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.trumpet {
				background-color: #1C1C1C;
				border-radius: 8px;
				width: 490rpx;
				height: 80rpx;
				overflow: hidden;
				white-space: nowrap;
				line-height: 80rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.icon {
					margin-left: 14rpx;
					width: 48rpx;
					height: 48rpx;
					line-height: 48rpx;

					.trumpt-icon {

						width: 48rpx;
						height: 48rpx;
					}
				}

				// 通知栏样式
				.pad_right {
					padding-right: 2em;
				}

				#scroll_div {
					line-height: 26px;
					height: 26px;
					overflow: hidden;
					white-space: nowrap;
					width: 535px;
					margin-left: 10px;
				}

				#scroll_begin,
				#scroll_end {
					.addspace {
						margin-left: 30rpx;
					}

					.noticeusers,
					.usersreward {
						color: #fe245e;
						margin: 0 15rpx;
					}

					display: inline;
				}
			}

			.rules {
				height: 80rpx;
				width: 48rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.team {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.myteam {
				width: 74rpx;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.team {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.icon-word {

				font-size: 20rpx;
			}

		}

		.ad {
			width: 690rpx;
			height: 200rpx;
			margin: 0 auto;
			margin-top: 32rpx;
			overflow: hidden;

			image {
				width: 690rpx;
				height: 200rpx;

			}
		}

		.kinds {
			margin-top: 32rpx;

			/deep/ .u-tabs__wrapper__nav__item {
				padding: 0 36rpx;
			}

			// 三种排序
			.sort-box {
				margin: 0 auto;
				width: 590rpx;
				display: flex;
				justify-content: space-between;
				line-height: 84rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				position: relative;



				.sort-box-item {
					// 子绝父相 定位箭头
					position: relative;

					// 上箭头
					&.two-arrow::before {
						position: absolute;
						top: 28rpx;
						right: -20rpx;
						content: '';
						display: inline-block;
						width: 0;
						height: 0;
						border: 8rpx solid #fff;
						border-top-color: transparent;
						border-bottom-color: #fff;
						border-right-color: transparent;
						border-left-color: transparent;
					}

					// 下箭头
					&.two-arrow::after {
						position: absolute;
						top: 48rpx;
						right: -20rpx;
						content: '';
						display: inline-block;
						width: 0;
						height: 0;
						border: 8rpx solid #fff;
						border-top-color: #fff;
						border-bottom-color: transparent;
						border-right-color: transparent;
						border-left-color: transparent;
					}

					// 选中字体变色
					&.active {
						color: #FF7803;

						// 上箭头选中
						&.two-arrow {
							&.before::before {
								border-bottom-color: #FF7803;
							}
						}

						// 下箭头选中
						&.two-arrow {
							&.after::after {
								border-top-color: #FF7803;
							}
						}

						// 单独下箭头选中
						&.sinple-arrow {
							&.after::after {
								border-top-color: #FF7803;
							}
						}
					}

					// 单独下箭头
					&.sinple-arrow::after {
						position: absolute;
						top: 40rpx;
						right: -28rpx;
						content: '';
						display: inline-block;
						width: 0;
						height: 0;
						border: 12rpx solid #FFFFFF;
						border-top-color: #FFFFFF;
						border-bottom-color: transparent;
						border-right-color: transparent;
						border-left-color: transparent;
					}
				}

				.white {
					// color: white;
				}
			}

			/*定义动画1*/
			@keyframes myfirst {
				0% {
					height: 0;
				}

				100% {

					height: 100rpx;
				}
			}

			/*定义动画2*/
			@keyframes mylast {
				0% {
					height: 100rpx;
				}

				100% {

					height: 0;
				}
			}

			.addmylast {
				animation: mylast 0.5s;
			}

			.chooseman {
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				text-align: center;
				position: absolute;
				top: 172rpx;
				buttom: 0;
				width: 750rpx;
				color: #FFFFFF;
				z-index: 999;
				background-color: #0a0a0a;
				border-radius: 0px 0px 28rpx 28rpx;

				.mannum {
					display: flex;
					justify-content: space-between;
					// 添加下拉动画
					animation: myfirst 0.5s;
					padding: 0 32rpx;
					text-align: left;
					height: 100rpx;
					line-height: 100rpx;
				}

				.yes {
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.choosed {
					color: #FF7803;
				}

			}
		}

		.goodscard {


			.goods-cards {
				position: relative;
				overflow: hidden;
				padding-top: 48rpx;
				padding-bottom: 130rpx;
				background: #1C1C1C;

				.card-item {
					margin: 0 auto 96rpx;
					color: white;
					width: 690rpx;
					height: 256rpx;

					display: flex;
					justify-content: left;
					align-items: center;
					position: relative;

					.card-lef {
						width: 180rpx;
						height: 180rpx;
						overflow: hidden;

						position: absolute;
						top: 0;

						.card-img {
							width: 100%;
							height: 100%;
						}
					}

					.card-rig {
						width: 480rpx;
						height: 180rpx;
						display: flex;
						flex-direction: column;
						position: absolute;
						right: 0;
						top: 0;

						.good-name {
							height: 48rpx;
							width: 480rpx;
							font-size: 28rpx;
							line-height: 48rpx;
							margin-bottom: 12rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

						}

						.good-details {
							margin-top: 16rpx;
							display: flex;
							justify-content: space-between;
							align-item: center;

							.good-chance {
								margin-top: 4rpx;
								font-size: 24rpx;
								height: 28rpx;

								opacity: 0.8;
								color: #FFFFFF;
							}

							.goodstatus {
								text-align: center;
								width: 84rpx;
								font-size: 28rpx;
								color: #ff7803;
							}

							.couponprice {
								color: #ff7803;
								height: 36rpx;
								font-size: 32rpx;
							}
						}
						.good-detailssec{
							margin-top: 28rpx;
							.goodstatus {
								text-align: center;
								width: 84rpx;
								font-size: 28rpx;
								color: #ff7803;
							}
						}
					}

					.join {
						width: 690rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: absolute;
						bottom: 0rpx;

						.joinnum {
							position: absolute;
							line-height: 28rpx;
							left: 0rpx;
							bottom: 18rpx;
							font-size: 28rpx;

							.joinnums {
								font-size: 26rpx;
								color: #ff7803;
							}
						}

						.joinbtn {
							width: 200rpx;
							height: 64rpx;
							font-size: 28rpx;
							position: absolute;
							right: 0rpx;
							bottom: 0rpx;
							color: white;
							border-radius: 32rpx;
							background-color: #ff7803;
							text-align: center;
							line-height: 64rpx;
						}
					}

					.underline {
						position: absolute;
						bottom: -48rpx;
						color: #fff;
						opacity: 0.1;
						width: 100%;
					}
				}
			}

		}

		.teambtn {
			width: 750rpx;
			height: 150rpx;
			position: fixed;
			bottom: 0;
			text-align: center;
			background: linear-gradient(180deg, rgba(28, 28, 28, 0.50) 0%, #1C1C1C 27%);

			image {
				width: 228rpx;
				height: 90rpx;
			}
		}


	}
</style>